<template>
  <div class="container-fluid">
    <div class="common_title">文章编辑</div>
    <div class="container-fluid common_con">
      <form class="form-horizontal article_form" id="form" ref="form">
        <input type="hidden" id="id" name="id" v-model="list.id" />
        <div class="form-group">
          <label for="inputTitle" class="col-sm-2 control-label"
            >文章标题：</label
          >
          <div class="col-sm-10">
            <input
              type="text"
              name="title"
              class="form-control title"
              id="inputTitle"
              v-model="list.title"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputCover" class="col-sm-2 control-label"
            >文章封面：</label
          >
          <div class="col-sm-10">
            <img :src="list.cover" class="article_cover" />
            <input
              name="cover"
              type="file"
              id="inputCover"
              @input="doinput"
              ref="file"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputCategory" class="col-sm-2 control-label"
            >文章类别：</label
          >
          <div class="col-sm-4">
            <select
              id="selCategory"
              name="categoryId"
              class="form-control input-sm"
              v-model="list.categoryId"
            >
              <option value="">所有分类</option>
              <option
                v-for="item in categorylist"
                :value="item.id"
                :key="item.id"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">发布时间：</label>
          <div class="col-sm-4" id="time">
            <!-- 日期插件 -->
            <el-date-picker
              name="date"
              v-model="list.date"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label"
            >文章内容：</label
          >
          <div class="col-sm-10" id="content">
            <div id="editor" name="content" ref="div1" style="z-index: 10">
              <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10 submit">
            <button
              type="submit"
              class="btn btn-success btn-edit"
              @click.prevent="edit('已发布')"
            >
              修改
            </button>
            <button
              type="submit"
              class="btn btn-default btn-draft"
              @click.prevent="edit('草稿')"
            >
              存为草稿
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { searcharticleList, getArticleCategory, editArticle } from "./article.js";
import E from "wangeditor";

export default {
  name: "article_edit",
  data() {
    return {
      list: {
        categoryId: "",
        date: "",
      },
      categorylist: [],
      editor: "",
    };
  },
  mounted() {
    this.editor = new E("#editor");
    this.editor.create();
  },
  async created() {
    let res = await searcharticleList(this.$route.params.id);
    this.list = res.data.data;
    let res1 = await getArticleCategory();
    this.categorylist = res1.data.data;
    this.editor.txt.html(this.list.content); // 重新设置编辑器内容
  },
  methods: {
    async edit(val) {
      //   debugger;
      //   this.list.state = val;
      let fd = new FormData(this.$refs.form);
      fd.append("content", this.editor.txt.html());
      fd.append("state", val);
      let res = await editArticle(fd);
      this.$message({
        type: "success",
        message: "修改成功!",
      });
      this.$router.go(-1);
      //   console.log(res);
    },
    doinput() {
      let path = this.$refs.file.files[0];
      let url = URL.createObjectURL(path);
      this.list.cover = url;
    },
  },
};
</script>

<style>
</style>